<template>
  <el-container
    v-if="!isLoginPage"
    class="app-container"
  >
    <el-aside
      width="200px"
      class="aside"
    >
      <LayoutSider />
    </el-aside>
    <el-container>
      <el-header class="header">
        <LayoutHeader />
      </el-header>
      <el-main class="main-content">
        <div class="content-wrapper">
          <router-view />
        </div>
      </el-main>
    </el-container>
  </el-container>
  <div
    v-else
    class="login-bg"
  >
    <router-view />
  </div>
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import LayoutSider from './components/LayoutSider.vue'
import LayoutHeader from './components/LayoutHeader.vue'
const route = useRoute()
const isLoginPage = computed(() => route.path === '/login')
</script>
<style>
.app-container { height: 100vh; background: #f0f2f5; }
.aside { background: #fff; box-shadow: 2px 0 8px #f0f1f2; }
.header { background: #fff; box-shadow: 0 2px 8px #f0f1f2; z-index: 10; }
.main-content { background: #f0f2f5; min-height: calc(100vh - 60px); }
.content-wrapper { padding: 32px; min-height: 100%; }
.login-bg { min-height: 100vh; background: linear-gradient(135deg, #e0e7ff 0%, #f0f2f5 100%); display: flex; align-items: center; justify-content: center; }
</style>
